<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
        body {
            margin: 2em;
        }

        /* // [START invalidstyle] */
        input.dirty:not(:focus):invalid {
            background-color: #FFD9D9;
        }

        input.dirty:not(:focus):valid {
            background-color: #D9FFD9;
        }

        /* // [END invalidstyle] */
    </style>
    <title>Creating Amazing Forms: Sample order form</title>
</head>

<body>
    <div role="main">
        <form method="post" id="usrForm">
            <fieldset>
                <legend>Contact Info</legend>
                <!-- // [START autocomplete] -->
                <label for="frmNameA">Name</label>
                <input type="text" name="name" id="frmNameA" placeholder="Full name" required autocomplete="name">

                <label for="frmEmailA">Email</label>
                <input type="email" name="email" id="frmEmailA" placeholder="name@example.com" required
                    autocomplete="email">

                <label for="frmEmailC">Confirm Email</label>
                <input type="email" name="emailC" id="frmEmailC" placeholder="name@example.com" required
                    autocomplete="email">

                <label for="frmPhoneNumA">Phone</label>
                <input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-555-555-1212" required
                    autocomplete="tel">
                <!-- // [END autocomplete] -->

                <label for="frmShoeSize">Shoe Size</label>
                <input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5">

                <!-- // [START datalist] -->
                <label for="frmFavChocolate">Favorite Type of Chocolate</label>
                <input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
                <datalist id="chocType">
                    <option value="white">
                    <option value="milk">
                    <option value="dark">
                </datalist>
                <!-- // [END datalist] -->
            </fieldset>


            <fieldset>
                <legend>Shipping</legend>
                <!-- // [START labels] -->
                <label for="frmAddressS">Address</label>
                <input type="text" name="ship-address" required id="frmAddressS" placeholder="123 Any Street"
                    autocomplete="shipping street-address">
                <!-- // [END labels] -->

                <label for="frmCityS">City</label>
                <input type="text" name="ship-city" required id="frmCityS" placeholder="New York"
                    autocomplete="shipping locality">

                <label for="frmStateS">State</label>
                <input type="text" name="ship-state" required id="frmStateS" placeholder="NY"
                    autocomplete="shipping region">

                <label for="frmZipS">Zip</label>
                <input type="text" name="ship-zip" required id="frmZipS" placeholder="10011"
                    autocomplete="shipping postal-code">

                <label for="frmCountryS">Country</label>
                <input type="text" name="ship-country" required id="frmCountryS" placeholder="USA"
                    autocomplete="shipping country">

                <label>
                    <input type="checkbox" name="billAndShip" id="cbBillAndShip">
                    Bill to this address.
                </label>
            </fieldset>

            <fieldset>
                <legend>Billing</legend>

                <label for="frmAddressB">Address</label>
                <input type="text" name="bill-address" id="frmAddressB" required placeholder="123 Any Street"
                    autocomplete="billing street-address">

                <label for="frmCityB">City</label>
                <input type="text" name="bill-city" id="frmCityB" required placeholder="New York"
                    autocomplete="billing locality">

                <label for="frmStateB">State</label>
                <input type="text" name="bill-state" id="frmStateB" required placeholder="NY"
                    autocomplete="billing region">

                <label for="frmZipB">Zip</label>
                <input type="text" name="bill-zip" id="frmZipB" required placeholder="10011"
                    autocomplete="billing postal-code">

                <label for="frmCountryB">Country</label>
                <input type="text" name="bill-country" id="frmCountryB" required placeholder="USA"
                    autocomplete="billing country">
            </fieldset>

            <fieldset>
                <legend>Payment</legend>
                <p>Do <b>NOT</b> provide real credit card information in this field.</p>
                <label for="frmNameCC">Name on card</label>
                <input type="text" name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">

                <label for="frmCCNum">Card Number</label>
                <input type="text" name="cardnumber" id="frmCCNum" required autocomplete="cc-number">

                <label for="frmCCCVC">CVC</label>
                <input type="text" name="cvc" id="frmCCCVC" required autocomplete="cc-csc">

                <label for="frmCCExp">Expiry</label>
                <!-- // [START placeholder] -->
                <input type="text" name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
                <!-- // [END placeholder] -->
            </fieldset>
            <div>
                <button class="btn" id="butCheckout">Check Out</button>
            </div>
        </form>
    </div>

    <script type="text/javascript">
        var form;

        function initForm() {
            form = document.getElementById("usrForm")
            /* // [START preventsubmission] */
            form.addEventListener("submit", function (evt) {
                if (form.checkValidity() === false) {
                    evt.preventDefault();
                    alert("Form is invalid - submission prevented!");
                    return false;
                } else {
                    // To prevent data from being sent, we've prevented submission
                    // here, but normally this code block would not exist.
                    evt.preventDefault();
                    alert("Form is valid - submission prevented to protect privacy.");
                    return false;
                }
            });
            /* // [END preventsubmission] */
        }

        function initConfirmEmail() {
            var elem = document.getElementById("frmEmailC");
            elem.addEventListener("blur", verifyEmail);

            function verifyEmail(input) {
                input = input.srcElement;
                sampleCompleted("Forms-orderConfirm");
                var primaryEmail = document.getElementById('frmEmailA').value
                /* // [START customvalidation] */
                if (input.value != primaryEmail) {
                    // the provided value doesn't match the primary email address
                    input.setCustomValidity('The two email addresses must match.');
                    console.log("E-mail addresses do not match", primaryEmail, input.value);
                } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                }
                /* // [END customvalidation] */
            }
        }

        function initInputs() {
            /* // [START initinputs] */
            var inputs = document.getElementsByTagName("input");
            var inputs_len = inputs.length;
            var addDirtyClass = function (evt) {
                sampleCompleted("Forms-order-dirty");
                evt.srcElement.classList.toggle("dirty", true);
            };
            for (var i = 0; i < inputs_len; i++) {
                var input = inputs[i];
                input.addEventListener("blur", addDirtyClass);
                input.addEventListener("invalid", addDirtyClass);
                input.addEventListener("valid", addDirtyClass);
            }
            /* // [END initinputs] */
        }

        function initNoSubmit() {
            form.addEventListener("submit", function (evt) {
                evt.preventDefault();
                alert("Submission of this form is prevented.");
            });
        }

        initForm();
        initInputs();
        initConfirmEmail();
    </script>
</body>

</html>